<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻列表</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet">
    <style>
        .img {
            width: 80px; height: 80px; float: left; margin-right: 1em;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-form :inline="true">
                    <el-form-item label="搜素">
                        <el-input v-model="keyword" placeholder="输入关键字搜索"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                    </el-form-item>
                    <el-link style="float:right; line-height: 3em" href="/login" :underline="false" type="danger">后台管理</el-link>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="list" style="width: 100%">
                    <el-table-column label="封面" width="100">
                        <template slot-scope="scope">
                            <el-image class="img" :src="scope.row.avatar" fit="cover"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="新闻标题">
                        <template slot-scope="scope">
                            <el-link :href="scope.row.url" target="_blank">{{ scope.row.title }}</el-link>
                            <p style="overflow:hidden; height: 3em">{{ scope.row.summary }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" label="作者" width="120"></el-table-column>
                    <el-table-column prop="publish_time" label="发布日期" width="180"></el-table-column>
                </el-table>
                <el-pagination style="text-align: center" layout="prev, pager, next" page-size="5" @current-change="handleCurrentChange" :total="count"></el-pagination>
            </el-main>
        </el-container>
    </div>
</body>
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data () {
            return {
                keyword: '',
                page: 1,
                list: [],
                total: 0,
                count: 0
            }
        },
        mounted () {
            this.getList()
        },
        methods: {
            getList () {
                axios(`/news?page=${this.page}&pageSize=5&title=${this.keyword}`).then(res => res.data).then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                    this.count = res.data.count
                })
            },
            handleCurrentChange (page) {
                this.page = page;
                this.getList();
            },
            onSearch () {
                this.page = 1;
                this.getList();
            }
        }
    })
</script>
</html>